<template>
	<view class="fenlei">
		<view class="cyfl">
			<img src="/static/icon/Group 959.png" class="image" />
			<view>级别分类</view>
		</view>
		<view class="cyfl-card">
			<view class="single" v-for="(item, index) in jbfl" @click="gojb(item)">
				{{item.name}}
				<view class="line" v-if="item.id % 4">

				</view>
			</view>
		</view>

		<view class="cyfl">
			<img src="/static/icon/Group 959.png" class="image" />
			<view>题材分类</view>
		</view>
		<view class="cyfl-card">
			<view class="single" v-for="(item, index) in curtcfl" @click="gotc(item)">
				{{item.name}}
				<view class="line" v-if="item.id % 4">

				</view>
			</view>
		</view>

		<view class="cyfl">
			<img src="/static/icon/Group 959.png" class="image" />
			<view>用途分类</view>
		</view>
		<view class="cyfl-card">
			<view class="single" v-for="(item, index) in curytfl" @click="goyt(item)">
				{{item.name}}
				<view class="line" v-if="item.id % 4">

				</view>
			</view>
		</view>

		<view class="cyfl">
			<img src="/static/icon/Group 959.png" class="image" />
			<view>语种分类</view>
		</view>
		<view class="cyfl-card">
			<view class="single" v-for="(item, index) in curyzfl" @click="goyz(item)">
				{{item.name}}
				<view class="line" v-if="item.id % 4">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jbfl: [{
						id: 1,
						name: '常用配音',
					},
					{
						id: 2,
						name: '央视配音',
					},
					{
						id: 3,
						name: '名人配音',
					},
					{
						id: 4,
						name: '智能配音',
					},
				],
				tcfl: [{
						id: 1,
						name: '专题配音',
					},
					{
						id: 2,
						name: '广告配音',
					},
					{
						id: 3,
						name: '微电影配音',
					},
					{
						id: 4,
						name: '纪录片配音',
					},
					{
						id: 5,
						name: '飞碟病毒',
					},
					{
						id: 6,
						name: 'PPT配音',
					},
					{
						id: 7,
						name: '游戏配音',
					},
					{
						id: 8,
						name: '栏目配音',
					},
					{
						id: 9,
						name: '促销配音',
					},
					{
						id: 10,
						name: '朗诵配音',
					},
					{
						id: 11,
						name: '动画配音',
					},
					{
						id: 12,
						name: '彩铃配音',
					},
					{
						id: 13,
						name: '童声配音',
					},
					{
						id: 14,
						name: '模仿配音',
					},
					{
						id: 15,
						name: '方言配音',
					},
					{
						id: 16,
						name: '男女对播',
					},
				],
				ytfl: [{
						id: 1,
						name: '企业集团',
					},
					{
						id: 2,
						name: '政府党建',
					},
					{
						id: 3,
						name: '公安法院',
					},
					{
						id: 4,
						name: '人物配音',
					},
					{
						id: 5,
						name: '学校配音',
					},
					{
						id: 6,
						name: '地产配音',
					},
					{
						id: 7,
						name: '颁奖配音',
					},
					{
						id: 8,
						name: '开场配音',
					},
					{
						id: 9,
						name: '广播小说',
					},
					{
						id: 10,
						name: '儿童故事',
					},
					{
						id: 11,
						name: 'APP自媒体',
					},
					{
						id: 12,
						name: '教学课件',
					},
					{
						id: 13,
						name: '教育培训',
					},
					{
						id: 14,
						name: '银行配音',
					},
					{
						id: 15,
						name: '城市宣传',
					},
					{
						id: 16,
						name: '规划工程',
					},
					{
						id: 17,
						name: '旅游宣传',
					},
					{
						id: 18,
						name: '地铁配音',
					},
					{
						id: 19,
						name: '语音提示',
					},
					{
						id: 20,
						name: '农化配音',
					},
					{
						id: 21,
						name: '化妆品配音',
					},
					{
						id: 22,
						name: '服装配音',
					},
					{
						id: 23,
						name: '家居配音',
					},
					{
						id: 24,
						name: '酒类配音',
					},
					{
						id: 25,
						name: '汽车配音',
					},
					{
						id: 26,
						name: '商场配音',
					},
					{
						id: 27,
						name: '健康养生',
					},
					{
						id: 28,
						name: '医院医药',
					},
				],
				yzfl: [{
						id: 1,
						name: '粤语'
					},
					{
						id: 2,
						name: '英语',
					},
					{
						id: 3,
						name: '日语',
					},
					{
						id: 4,
						name: '韩语',
					},
					{
						id: 5,
						name: '法语'
					},
					{
						id: 6,
						name: '德语',
					},
					{
						id: 7,
						name: '俄语',
					},
					{
						id: 8,
						name: '泰语',
					},
					{
						id: 9,
						name: '越南语',
					},
					{
						id: 10,
						name: '印度语',
					},
					{
						id: 11,
						name: '印尼语',
					},
				],
				// curtcfl: [],
				// curytfl: [],
				// curyzfl: []
				tcflmore: false,
				ytflmore: false,
				yzflmore: false
			}

		},
		computed: {
			curtcfl() {
				return this.tcflmore ? this.tcfl : this.tcfl.slice(0, 11).concat({
					id: 12,
					name: '更多'
				})
			},
			curytfl() {
				return this.ytflmore ? this.ytfl : this.ytfl.slice(0, 15).concat({
					id: 16,
					name: '更多'
				})
			},
			curyzfl() {
				return this.yzflmore ? this.yzfl : this.yzfl.slice(0, 7).concat({
					id: 8,
					name: '更多'
				})
			}
		},
		methods: {
			gotc(item) {
				if (item.name === '更多') {
					this.tcflmore = true;
				} else {
					uni.navigateTo({
						url: `/pages/showAudioList/index?data=${item.name}`
					})
				}
			},
			goyt(item) {
				if (item.name === '更多') {
					this.ytflmore = true;
				} else {
					uni.navigateTo({
						url: `/pages/showAudioList/index?data=${item.name}`
					})
				}
			},
			goyz(item) {
				if (item.name === '更多') {
					this.yzflmore = true;
				} else {
					uni.navigateTo({
						url: `/pages/showAudioList/index?data=${item.name}`
					})
				}
			},
		}
	}
</script>

<style scoped>
	body {
		background-color: #F5F5F5;
	}

	.fenlei {
		padding: 0 20rpx;
	}

	.cyfl {
		display: flex;
		gap: 10px;
		margin: 20rpx 0;
	}

	.image {
		width: 20px;
		height: 20px;
	}

	.cyfl-card {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 15rpx;
		font-size: 28rpx;
	}

	.single {
		position: relative;
		display: flex;
		width: 22%;
		padding: 15rpx 10rpx;
		justify-content: center;
		border-bottom: 2rpx solid #eee;
	}

	.line {
		position: absolute;
		right: 0;
		width: 2rpx;
		height: 50%;
		background-color: #eee;
	}
</style>